<template>
  <div class="icon-list">
    <ul class="demo-icon-list">
      <li
        v-for="(icon, num) in icons"
        :key="num"
        class="icon-item"
        @click="changeIcon(icon.key)"
      >
        <span class="demo-svg-icon">
          <el-icon>
            <component :is="icon.key" />
          </el-icon>
          <span class="icon-name">{{ icon.key }}</span>
        </span>
      </li>
    </ul>
  </div>
</template>

<script setup>
import * as iconAll from '@element-plus/icons-vue';
import useClipboard from 'vue-clipboard3';
import { ElMessage } from 'element-plus';

const { toClipboard } = useClipboard();

let icons = [];
for (const iconName in iconAll) {
  icons.push({ key: iconName });
}
const changeIcon = icon => {
  toClipboard(icon);
  console.log(icon);
  ElMessage({
    message: '复制成功',
    type: 'success',
  });
};
</script>
<style lang="scss" scoped>
.icon-list {
  width: 100%;
  height: 100vh;
}
.icon-name {
  padding-top: 8px;
}
.demo-icon-list {
  overflow: hidden;
  list-style: none;
  padding: 0 !important;
  border-top: 1px solid var(--el-border-color);
  border-left: 1px solid var(--el-border-color);
  border-radius: 4px;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
}
.icon-item {
  cursor: pointer;
  text-align: center;
  color: var(--el-text-color-regular);
  height: 90px;
  font-size: 13px;
  border-right: 1px solid var(--el-border-color);
  border-bottom: 1px solid var(--el-border-color);
  transition: background-color var(--el-transition-duration);
  :hover {
    background-color: #f5f7fa;
  }
}
.demo-svg-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  // cursor: pointer;
}
.el-icon {
  --color: inherit;
  height: 2em;
  width: 2em;
  line-height: 2em;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: relative;
  fill: currentColor;
  color: var(--color);
  font-size: inherit;
  svg {
    height: 1.5em;
    width: 1.5em;
  }
}
</style>
